<template>
  <div id="app">
  <top-nav></top-nav>
  <transition enter-active-class="animate__animated animate__rollIn">
    <keep-alive>
    <router-view @play="play" @playall="playall"></router-view>
    </keep-alive>
  </transition>
  <transition enter-active-class="animate__animated animate__slideInLeft">
  <music-play  v-if="music" 
      :music="music" 
      :playCollect="playCollect" 
      @changemusic="changeMusic"
      @changecircle="changecircle"
      :cirlceMode="cirlceMode"
      @play="play"
  ></music-play>
  </transition>
  </div>
</template>
<script>
import TopNav from '@/components/TopNav.vue'
import MusicPlay from '@/components/MusicPlay.vue'
export default {
  components:{
    TopNav,
    MusicPlay
  },
  data(){
    return {
      music:null,
      playCollect:[],
      cirlceMode:"list",
    }
  },
  methods:{
    play(song){
      this.music=song;
      let isExit=false;
      for(let i=0;i<this.playCollect.length;i++){
        if(this.playCollect[i].id==song.id){
          //在播放列表存在
          isExit=true;
          break;
        }
      }
      if(isExit){
        console.log("该歌曲已经存在播放列表");
      }else{
        this.playCollect.push(song); 
      }
    },
    changeMusic(i){
        let currentIndex=0;
        this.playCollect.forEach((item,index)=>{
          if(item.id==this.music.id){
            currentIndex=index;
          }
        });
        //判断播放模式
        if(this.cirlceMode=='single'){
          //单曲循环
          this.music={...this.playCollect[currentIndex]};
          return;
        }else if(this.cirlceMode=='random'){
          //随机播放
          let random=Math.random()*(this.playCollect.length);
              random=Math.floor(random);
            this.music=this.playCollect[random];
            return;
        }
        if(i==1){
          //上一曲
          currentIndex--;
          if(currentIndex<0&&!this.playCollect[currentIndex]){
            currentIndex=this.playCollect.length-1;
          }
        }else if(i==2){
          //下一曲
          currentIndex++;
          if(currentIndex>this.playCollect.length-1&&!this.playCollect[currentIndex]){
            currentIndex=0;
          }
        }
        this.music=this.playCollect[currentIndex];
   },
   playall(songs){
     this.playCollect=songs;
     this.music=songs[0];
   },
   changecircle(circle){//设置 循环模式
     this.cirlceMode=circle;
   }
  },
  
}
</script>